<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <title>My App</title>  

  <link rel="stylesheet" href="styles/app.css"/>
  <link rel="stylesheet" href="lib/onsen/css/onsenui.css">  
  <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">  

  <script src="lib/onsen/js/angular/angular.js"></script>    
  <script src="lib/onsen/js/onsenui.js"></script>    
  <script src="js/app.js"></script>
  <script>
    var module = ons.bootstrap();

    module.controller('AppCtrl', function($scope) {
      $scope.pageTitle = 'Page1';
    });

    ons.ready(function() {
      console.log("ons.ready");

      navi.on('postPop', function(event) {
        console.log(event);
      });

      navi.on('postPush', function(event) {
        console.log(event);
      });
    });
  </script>

</head>
<body ng-controller="AppCtrl">

  <ons-navigator ng-cloak var="navi">
    <ons-page>
      <ons-toolbar>
        <div class="left"></div>
        <div class="center">{{pageTitle}}</div>
        <div class="right"><ons-toolbar-button>Label</ons-toolbar-button></div> 
      </ons-toolbar>

      <div style="text-align: center">
        <br>
        <ons-button ng-click="navi.pushPage('page2.html')">Push Page</ons-button>
      </div>

      <ons-bottom-toolbar>
        <div class="bottom-bar__line-height" style="text-align: center;">Bottom toolbar</div>
      </ons-bottom-toolbar>
    </ons-page>
  </ons-navigator>

  <ons-template id="page2.html">
    <ons-toolbar>
      <div class="left"><ons-back-button>Back</ons-back-button></div> 
      <div class="center">Page2</div> 
      <div class="right"></div>
    </ons-toolbar>

    <div style="text-align: center">
      <br>
      <ons-button ng-click="navi.popPage()">Pop</ons-button>
      <ons-button ng-click="navi.pushPage('page2.html')">Push</ons-button>
    </div>
  </ons-template>
 
</body>
</html>
